<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <script type="text/javascript" src="../js/vue.js"></script>
</head>
<body>
    <!-- 总结 -->
    <!-- 
        插值语句：
            1.一般用于标签体内容
            2.写法 {{}}插值语法来读取 data中的数据 
        指令语法：
            1.功能：用于解析标签（包括 标签属性、标签文本体、绑定事件。。。。）
            2.举例 v-bind:href 可以简写成 :href 里面可以写js表达式
     -->
    <!-- 模板 -->
    <div id="root">
        <!-- 插值语法 -->
        <div>{{name}}</div>
        <div>{{url.toUpperCase()}}</div>
        <hr/>
        <!-- 指令语法 -->
        <a v-bind:href="url.toUpperCase()">帝都帝都，这里是宵宫</a><br>
        <a :href="url">百度百度</a>
    </div>
</body>
    <script>
       const m = new Vue({
            el:'#root',
            data:{
                name:"王宝兰",
                url:"https://www.baidu.com",
                hello:'您好'
            }
       }) 
    </script>
</html>